import React, { useEffect, useState } from 'react'
import axios from '../../api/api'
import { Space, Table, Tag, Button } from 'antd';
import { Checkbox, Form, Input } from 'antd';
import { Modal } from 'antd';
import {  Drawer } from 'antd';


function Index() {
  
    const [data, setaData] = useState()
    const [keyword, setkeyword] = useState('')
    const getDatalist = async () => {
        const res = await axios.get('/api/article/list', {
            params: {
                keyword: keyword
            }
        })
        console.log(res.data.rows)
        setaData(res.data.rows)
    }
    useEffect(() => {
        getDatalist()
    }, [keyword])
    const del = (id) => {
        const sc = data.filter((v) => v.id != id)
        setaData(sc)
    }
    // 搜索
    const onFinish = values => {
        console.log('Success:', values);
        setkeyword(values.keyword)
    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    // 新增
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const Finish = async(values) => {
        console.log('Success:', values);
        const command = {
            "title": values.title,//文章标题
            "content":  values.content,//文章内容
            "tagList":  values.tagList,//标签  array[string]
            "categoryList":  values.tagList,//分类  array[string]
            "authorId": 47529555//用户id 暂时写死47529555 登陆成功后返回的用户信息

        }
        const res=await axios.post('/api/article',command,{
            headers :{
                Authorization:'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Imp5a2wiLCJ1c2VySWQiOjQ3NTI5NTU1LCJyb2xlIjoxLCJpYXQiOjE3Mzk3OTQyNDIsImV4cCI6MTc0MjM4NjI0Mn0.O7KlsogMjr6YowtOXKGrEaldz5kjKHWQCn3FGvRd1bA',
            }
        }
            
        )
        getDatalist()
        alert('新增成功')
        setIsModalOpen(false);
    };
    const FinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    const addxz = () => {
        setIsModalOpen(true);
    }
    // 详情
    const [details,setDetails]=useState()
    const [open, setOpen] = useState(false);
    const showDrawer = () => {
      setOpen(true);
    };
    const onClose = () => {
      setOpen(false);
    };
    const xq=async(id)=>{
        setOpen(true);
        const res=await axios.get(`/api/article/${id}`,{
            params:{
                id:id
            }
        })
        console.log(res.data)
        setDetails(res.data.content)
    }
  
    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            render: text => <a>{text}</a>,
        },
        {
            title: '标签页面',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '主题',
            dataIndex: 'title',
            key: 'title',
        },

        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button onClick={() => del(record.id)}>删除</Button>
                    <Button onClick={()=>xq(record.id)}>详情</Button>
                </Space>
            ),
        },
    ];
    return (
        <div>
   <Drawer
        title="Basic Drawer"
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={open}
      >
        <p>{details}</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
            <Modal
                title="Basic Modal"
                closable={{ 'aria-label': 'Custom Close Button' }}
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={Finish}
                    onFinishFailed={FinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="页面标签"
                        name={['content']}

                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Password"
                        name={['title']}

                    >
      <Input />
                    </Form.Item>



                    <Form.Item label={null}>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
            <Button onClick={addxz}>发布</Button>
            <Form
                layout='inline'
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 1200 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="页面标签"
                    name='keyword'

                >
                    <Input />
                </Form.Item>




                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                        搜索
                    </Button>
                </Form.Item>
            </Form>
            <Table columns={columns} dataSource={data}
                pagination={{
                    total: data,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: total => `Total ${total} items`,
                    defaultPageSize: 3
                }}

            />
        </div>
    )
}

export default Index
